<template>
  <a-dropdown>
    <a class="user-dropdown-link" @click.prevent>
      <a-avatar :src="userStore.avatar" :size="32">
        {{ userStore.name?.charAt(0) }}
      </a-avatar>
      <span class="username">{{ userStore.name }}</span>
    </a>
    <template #overlay>
      <a-menu>
        <a-menu-item key="profile">
          <router-link to="/profile">
            <user-outlined />
            <span>个人信息</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="change-password">
          <router-link to="/change-password">
            <lock-outlined />
            <span>修改密码</span>
          </router-link>
        </a-menu-item>
        <a-menu-divider />
        <a-menu-item key="logout" @click="handleLogout">
          <logout-outlined />
          <span>退出登录</span>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script lang="ts" setup>
import { useUserStore } from '@/stores/user';
import { useRouter } from 'vue-router';
import { UserOutlined, LogoutOutlined, LockOutlined } from '@ant-design/icons-vue';

const userStore = useUserStore();
const router = useRouter();

const handleLogout = () => {
  userStore.logout();
  router.push('/login');
};
</script>

<style scoped>
.user-dropdown-link {
  display: flex;
  align-items: center;
  padding: 0 12px;
  cursor: pointer;
  transition: all 0.3s;
}

.user-dropdown-link:hover {
  background: rgba(0, 0, 0, 0.025);
}

.username {
  margin-left: 8px;
  color: rgba(0, 0, 0, 0.85);
}

:deep(.ant-dropdown-menu-item) {
  min-width: 160px;
}

:deep(.ant-dropdown-menu-item a) {
  display: flex;
  align-items: center;
  color: inherit;
}

:deep(.ant-dropdown-menu-item .anticon) {
  margin-right: 8px;
}
</style> 